回想拿到某個專案時，一邊看一邊驚嘆。

( ･∀･)σ < 全部頁面都是滿版畫面喔！　　　　　　　　　　　　　　　Σ(ﾟдﾟ )

( ･∀･)σ < RWD 就做視窗寬度等比例縮放！　　　　　　　　　　　　　((ﾟдﾟ ))

( ･∀･)σ < 因為上下左右都固定，排版就用 absolute 來做吧！　　　　　((((ﾟдﾟ ))))

為什麼要用 Grid？

一般而言，用 display: flex 與 position 就能處理常見網頁佈局。但是，當網頁內容同時受到 Y 軸與 X 軸限制時，單線性排版的 flex 用起來就會卡卡的。動態增減的網頁元素，例如：產品卡片，也容易破版或歪掉。這時候改用 display: grid，就能更好的處理佈局。個人覺得 Grid 寫法上更加直觀。子元素使用相關單位時，也能清楚理解到底繼承了誰的寬、高。

簡單比較 Flexbox 與 Grid：

• Flexbox：內容導向，先有內容才決定空間。
• Grid：版型導向，先劃好格子，再把內容放進去。

不過，因為 Grid 的相關屬性多、繪製格線的方式彈性高、可以跨格線等等因素，學習門檻較高。我剛接觸的時候，常常不知道該怎麼下屬性與值。所以在進入範例前，先來了解一下有哪些常用屬性。

使用 Grid 時，個人習慣依序處理「畫格線」 → 「指定子元素的區域」 → 「調整對齊方式、資料流向」。所以今天就先介紹該怎麼畫格線！

設定欄、列與間距

▶︎ grid-template-columns 與 grid-template-rows

grid-template-columns定義欄（Column）的數量與寬度；grid-template-rows 定義列（Row）的數量與高度。

除了常用的 px、%、auto 外，還可以設定：

• fr：彈性分配空間
• minmax(最小, 最大)：動態範圍，設定最小與最大範圍
• fit-content(最大) ：內容自適應，但不超過限制範圍
• repeat(次數, 範圍)：重複固定列高或欄寬

明確指定數量

/* 設定兩欄，第一欄寬度 100px，第二欄分配剩餘空間 */
grid-template-columns: 100px 1fr;

/* 重複三欄，寬度為 100px */
grid-template-columns: repeat(3, 100px);  

/* 設定兩列，第一列高度 100px，第二列分配剩餘空間 */
grid-template-rows: 100px 1fr;  

/* 重複三列，高度為 100px */
grid-template-rows: repeat(3, 100px);  

利用 repeat() 填滿剩餘空間，以 rows 為例：

/* 父容器高度內，盡可能塞入最多個高度為 100px 的列（有可能留空） */
grid-template-rows: repeat(auto-fill, 100px);

/* 同樣會先計算最多能塞入幾列，如果有剩餘空間因為有設定 max 1fr 所以會將空間平分 */
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));

/* 還可以跟明確指定混用 */
/* 第一列固定 200px，最後一列分配剩餘空間。其餘塞入多個高度為 100px 的列 */
grid-template-rows: 200px repeat(auto-fill, 100px) 1fr;

▶︎ grid-template-areas

定義格線內的各區域

grid-template-areas:
  "header header header"
  "sidebar content content"
  "sidebar content content";

還可以用 . 空下空間

grid-template-areas:
  ". header header"
  ". content content"
  "sidebar content content";

▶︎ grid-template

上方三種屬性的簡寫，依序設定 areas rows / columns

grid-template: 100px 1fr / 1fr 1fr;

/* 等同於 */
grid-template-rows: 100px 1fr;
grid-template-columns: 1fr 1fr;

grid-template:
  "a a a" 100px
  "b b b" 1fr
  / 2fr 1fr;
  
  /* 等同於 */
grid-template-areas:
  "a a a"
  "b b b";
grid-template-rows: 100px 1fr;
grid-template-columns: 2fr 1fr;

▶︎ gap

下方兩種屬性的簡寫，依序設定 列間距 欄間距

• row-gap ：定義列間距
• column-gap ：定義欄間距

gap: 20px;

/* 等同於 */
row-gap: 20px;
column-gap: 20px;

gap: 20px 10px;

/* 等同於 */
row-gap: 20px;
column-gap: 10px;

範例

提供了一個可以操作的簡單範例，動手玩玩看 Grid 是怎麼運作的吧

CodePen 實作範例

參考資料

• 《金魚都能懂的 CSS 必學屬性：網頁設計必備寶典》 李建杭（Amos）著
• MDN Web Docs